<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">商品信息</a></li>
        <li role="presentation"><a href="#spec" aria-controls="spec" role="tab" data-toggle="tab">商品规格</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="info">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-category_id" data-rule="required" data-source="goods_category/index" class="form-control selectpage" name="row[category_id]" type="text" value="{$row.category_id?:''}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Brand_id')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-brand_id" data-rule="required" data-source="brand/index" class="form-control selectpage" name="row[brand_id]" type="text" value="{$row.brand_id?:''}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name?:''}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Market_price')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-market_price" data-rule="required" class="form-control" step="0.01" name="row[market_price]" type="number" value="{$row.market_price?:0}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-price" data-rule="required" class="form-control" step="0.01" name="row[price]" type="number" value="{$row.price?:0}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Cost_price')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-cost_price" class="form-control" step="0.01" name="row[cost_price]" type="number" value="{$row.cost_price?:0}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Commission')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-commission" class="form-control" step="0.01" name="row[commission]" type="number" value="{$row.commission?:0}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Number_store')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-number_store" data-rule="required" class="form-control" name="row[number_store]" type="number" value="{$row.number_store?:10}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input id="c-image" data-rule="required" class="form-control" size="50" name="row[image]" type="text" value="{$row.image?:''}">
                        <div class="input-group-addon no-border no-padding">
                            <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                            <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                        </div>
                        <span class="msg-box n-right" for="c-image"></span>
                    </div>
                    <ul class="row list-inline plupload-preview" id="p-image"></ul>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Images')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input id="c-images" data-rule="required" class="form-control" size="50" name="row[images]" type="text" value="{$row.images?:''}">
                        <div class="input-group-addon no-border no-padding">
                            <span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                            <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                        </div>
                        <span class="msg-box n-right" for="c-images"></span>
                    </div>
                    <ul class="row list-inline plupload-preview" id="p-images"></ul>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Sort')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-sort" data-rule="required" class="form-control" name="row[sort]" type="number" value="{$row.sort?:50}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
                <div class="col-xs-12 col-sm-8">
                    {:build_radios('row[status]', $statusList, $row['status']??1)}
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50">{$row.content?:''}</textarea>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="spec">
            <table class="table table-bordered">
                <tr class="alert-success">
                    <th>规格名称</th>
                    <th>图片</th>
                    <th>库存</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
                <tbody>

                    <tr v-for="(item, index) in specs">
                        <input type="hidden" :name="'row[spec]['+index+'][id]'" v-model="item.id">
                        <td>
                            <input id="c-sort" data-rule="required" class="form-control" :name="'row[spec]['+index+'][name]'" type="text" v-model="item.name">
                        </td>
                        <td>
                            <div class="input-group">
                                <input :id="'c-specimage-'+index" data-rule="required" class="form-control" size="50" :name="'row[spec]['+index+'][image]'" type="text" v-model="item.image">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" :id="'plupload-image'+index" class="btn btn-danger plupload" :data-input-id="'c-specimage-'+index" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" :data-preview-id="'p-specimage-'+index"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" :data-input-id="'c-specimage-'+index" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                </div>
                                <span class="msg-box n-right" :for="'c-specimage-'+index"></span>
                            </div>
                            <ul class="row list-inline plupload-preview" :id="'p-specimage-'+index"></ul>
                        </td>
                        <td>
                            <input id="c-sort" data-rule="required" class="form-control" :name="'row[spec]['+index+'][store_count]'"  type="number" v-model="item.store_count">
                        </td>
                        <td>
                            <input id="c-sort" data-rule="required" class="form-control" :name="'row[spec]['+index+'][price]'"  type="number" v-model="item.price">
                        </td>
                        <td>
                            <button class="btn btn-danger btn-sm" @click="del_spec(item, index)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="btn btn-info add-spec" @click="add_spec()" type="button">加一列</button>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script>



    var addVue = new Vue({
        el:'#spec',
        data: {
            specs: {$specs},
        },
        mounted:function(){
            _this = this;
           // this.add_spec();
        },
        methods: {
            add_spec(){
                this.specs.push({
                    id: '',
                    name: '',
                    price: 0,
                    store_count: 0,
                    image: ''
                })
            },
            del_spec(item, index) {
                var that = this;
                if(item.id) {
                     $.post('goods_spec/delSpec', {id: item.id}, function(res) {
                        if(res.code == 1) {
                            that.specs.splice(index, 1);
                        }
                    });
                 } else {

                    this.specs.splice(index, 1);
                 }
               
            },

        }
    });




</script>